<template>
  <div class="info-card flex flex-col">
    <router-link
      class=""
      :to="{
        name: 'SupplyDetail',
        query: { id: props.data.id, type: 'demand' },
      }"
    >
      <div class="flex items-center justify-between mb-16px">
        <div class="fw-500 font-size-18px text-dark">
          {{ props.data.supplyTitle || props.data.demandTitle }}
        </div>
        <span
          class="font-size-12px text-#fff lh-16px py-3px px-10px border-rd-2px"
          :style="tagBgStyle"
          >{{ tagName }}</span
        >
      </div>
      <div class="flex items-center mb-16px font-size-14px">
        <div class="inline-flex items-center mr-20px">
          <img class="w-16px h-16px mr-3px" src="@/assets/map.svg" alt="" />
          {{ props.data?.provinceName }} {{ props.data?.cityName }}
        </div>
        <div class="inline-flex items-center">
          <img class="w-16px h-16px mr-3px" src="@/assets/time.svg" alt="" />
          <span class="text-#767676">{{
            props.data.createTime.slice(0, 16)
          }}</span>
        </div>
      </div>
      <div class="w-full h-1px bg-#D9DBE1 mb-20px"></div>
      <div class="flex flex-col font-size-14px">
        <div class="mb-16px single-overflow">
          需求说明：{{ props.data.demandDesc }}
        </div>
        <div class="mb-16px">联系人：{{ props.data.contactUser || "-" }}</div>
        <div class="mb-16px">
          联系方式：{{ props.data.contactUserMobile || "-" }}
        </div>
        <div class="mb-16px">
          需求时间：{{ props.data.demandBegin.slice(0, 16) }} ~
          {{ props.data.demandEnd.slice(0, 16) }}
        </div>
        <div>需求需算：{{ props.data.budgetPrice }} {{props.data.priceUnit}}</div>
      </div>
    </router-link>
    <div v-if="isCreator" class="card-footer text-right">
      <el-button
        :type="props.data.status === 0 ? 'primary' : ''"
        @click="toggleStatus"
        >{{ props.data.status === 1 ? "下架" : "上架" }}</el-button
      >
      <el-button type="primary" size="mini" @click="goEdit">编辑</el-button>
    </div>
  </div>
</template>

<script setup>
import { SOURCE_TYPE_ENUM, SOURCE_TYPE_TAG_COLOR_ENUM } from "@/const";

const props = defineProps({
  data: Object,
  isCreator: Boolean,
});

const tagName = computed(() => SOURCE_TYPE_ENUM[props.data.demandType]);
const tagBgStyle = computed(() => ({
  background: SOURCE_TYPE_TAG_COLOR_ENUM[props.data.demandType],
}));

const router = useRouter();
const goEdit = () => {
  router.push({
    name: "CreateDemand",
    query: { id: props.data.id },
  });
};

const $api = inject("$api");
const toggleStatus = async () => {
  const { id, status } = props.data;
  const { code } = await $api.supply.toggleDemand({
    id,
    status: Number(!status),
  });
  if (code === 200) {
    ElMessage.success(status ? "下架成功" : "上架成功");
    props.data.status = Number(!status);
  }
};
</script>
